import React, { useEffect, useState } from 'react';
import { List, Divider, Breadcrumb, Button, Modal, message } from 'antd';
import "../AddArticle/Addarticle.css"
import axios from "axios"
import servicePath from '../../config/apiUrl';
import VirtualList from 'rc-virtual-list';
import { useNavigate } from 'react-router-dom';

const { confirm } = Modal;
const Drafts = () => {
    const navigate = useNavigate()
    const ContainerHeight = 400;
    const [list, setList] = useState([]);
    useEffect(() => {
        getList()
    }, [])

    const getList = () => {
        axios({
            method: 'get',
            url: servicePath.getSaveArticle,
            withCredentials: true,
            header: { 'Access-Control-Allow-Origin': '*' }
        }).then(
            res => {
                setList(res.data.data)
            }
        )
    }
    const onScroll = e => {
        if (e.target.scrollHeight - e.target.scrollTop === ContainerHeight) {
            //   appendData();
        }
    };
    //删除文章
    const delArticle = (id) => {
        confirm({
            title: '确定要删除这篇博客草稿吗?',
            content: '如果你点击OK按钮，草稿将会永远被删除，无法恢复。',
            onOk() {
                axios(servicePath.deleteDrafts + id, { withCredentials: true }).then(
                    res => {
                        message.success('草稿删除成功')
                        setList(list)
                    }
                )
            },
            onCancel() {
                message.success('没有任何改变')
            },
        });
    }
    //编辑文章
    const editArtcile = (id) => {
        navigate ('/admin/addArticle/'+id)
    }
    return (
        <>
            <div className='header'>草稿箱</div>
            <Divider />
            <List>
                <VirtualList
                    data={list}
                    height={ContainerHeight}
                    itemHeight={47}
                    itemKey="email"
                    onScroll={onScroll}
                >
                    {item => (
                        <List.Item
                            actions={[<Button onClick={() => { editArtcile(item.id) }}>编辑</Button>,
                            <Button onClick={() => { delArticle(item.id) }}>删除</Button>]}
                        >
                            <List.Item.Meta
                                title={item.title}
                                description={<Breadcrumb separator="|">
                                    <Breadcrumb.Item>{item.add_time}</Breadcrumb.Item>

                                </Breadcrumb>}
                            >
                            </List.Item.Meta>
                        </List.Item>
                    )}
                </VirtualList>
            </List>
        </>
    );
}

export default Drafts;